<template>
    <el-dialog id="edit-basic"
               append-to-body
               top="10vh"
               :width="dialog.width"
               :visible="dialog.visible"
               :modal-append-to-body="false"
               :close-on-click-modal="false"
               @close="close">
        <div slot="title" class="text-center">
            <span class="font-s20 text-bold">
                <icon name="edit"></icon>
                编辑简历 {{ resume.id }} 求职意向
            </span>
        </div>
        <el-descriptions size="medium"
                         label-class-name="detail-label"
                         border
                         :column="1">
            <!-- 求职意向 -->
            <el-descriptions-item label="求职意向：">
                <el-input v-model="model.intention_jobs" size="medium" maxlength="100" placeholder="求职意向"></el-input>
            </el-descriptions-item>
            <!-- 期望薪资 -->
            <el-descriptions-item label="期望薪资：">
                <el-select v-model="model.expected_salary" size="medium" placeholder="期望薪资">
                    <el-option v-for="item in expectedSalaryOptions"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value"></el-option>
                </el-select>
            </el-descriptions-item>

            <!-- 期望薪资 -->
            <el-descriptions-item label="期望薪资：">
                <el-select v-model="model.job_status" size="medium" placeholder="期望薪资">
                    <el-option v-for="item in jobStatusOptions"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value"></el-option>
                </el-select>
            </el-descriptions-item>
            <!-- 期望职位 -->
            <el-descriptions-item label="期望职位：">
                <div class="r-flex">
                    <div class="r-flex__item">
                        <div class="detail-tag">
                            <el-tag v-for="(item, index) in model.work_post"
                                    :key="item.value"
                                    :disable-transitions="true"
                                    @close="handlePositionTagClose(index)"
                                    class="font-s14"
                                    closable>
                                {{ item.label }}
                            </el-tag>
                        </div>
                    </div>
                    <el-popover v-show="model.work_post.length < 5"
                                v-model="popover.positionVisible"
                                placement="bottom" >
                        <el-cascader-panel ref="position-plus"
                                           :options="positionOptions"
                                           @change="handleChangePositionPlus"></el-cascader-panel>
                        <el-button slot="reference"
                                   type="primary"
                                   size="mini"
                                   icon="el-icon-plus"
                                   :plain="!popover.positionVisible"
                                   circle></el-button>
                    </el-popover>
                </div>
            </el-descriptions-item>
            <!-- 工作地区 -->
            <el-descriptions-item label="工作地区：">
                <div class="r-flex">
                    <div class="r-flex__item">
                        <div class="detail-tag">
                            <el-tag v-for="(item, index) in model.work_area"
                                    :key="item.value"
                                    :disable-transitions="true"
                                    @close="handleAreaTagClose(index)"
                                    class="font-s14"
                                    closable>
                                {{ String(item.value).length === 8 ? item.label : item.merge_label }}
                            </el-tag>
                        </div>
                    </div>
                    <el-popover v-show="model.work_area.length < 5"
                                v-model="popover.areaVisible"
                                placement="bottom">
                        <el-cascader-panel ref="area-plus"
                                           :options="workAreaOptions"
                                           @change="handleChangeAreaPlus"></el-cascader-panel>
                        <el-button slot="reference"
                                   type="primary"
                                   size="mini"
                                   icon="el-icon-plus"
                                   :plain="!popover.areaVisible"
                                   circle></el-button>
                    </el-popover>
                </div>
            </el-descriptions-item>
        </el-descriptions>
        <div class="mt-20 text-right">
            <el-button type="text"
                       size="medium"
                       @click="close">取消
            </el-button>
            <el-button type="primary"
                       size="medium"
                       :loading="saveLoading"
                       @click="save">
                <icon name="save"></icon>
                保存
            </el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import Component, { mixins } from 'vue-class-component'
import { Prop, Emit } from 'vue-property-decorator'
import { namespace } from 'vuex-class'

import functionMixin from '@/mixins/function'
import resumeOptionsMixin from '@/mixins/options'

import { toJson, isArray, errorMessage, successMessage, warningMessage } from '@/utils'

const module = namespace('cms/resume')

@Component
export default class EditBasic extends mixins(functionMixin, resumeOptionsMixin) {
  @Prop({ type: Object, default: { width: '1000px', visible: false } }) dialog!: any

  // Vuex
  @module.State resume!: any
  @module.Action updateJobIntention!: (payLoad: any) => Promise<any>

  // form 模型
  private model: any = {}

  // popover
  private popover = {
    positionVisible: false,
    areaVisible: false
  }

  // 保存加载状态
  private saveLoading: boolean = false

  /*----- 钩子 -----*/
  created() {
    this.model = toJson(this.resume.job_intention)
  }

  /**
   * 处理地区标签删除
   *
   * @param {number} index 索引
   * @return {void}
   */
  private handlePositionTagClose(index: number): void {
    this.model.work_post.splice(index, 1)
  }

  /**
   * 添加岗位
   *
   * @param {Array} value 选定值
   * @return {void}
   */
  private handleChangePositionPlus(value: Array<number>): void {
    const nodes = (this.$refs['position-plus'] as any).getCheckedNodes()
    if (nodes.length === 1) {
      const node = nodes[0]
      if (!this.model.work_post.find((item: any) => item.value === node.value)) {
        this.model.work_post.push({
          'value': node.value,
          'label': node.label
        })
        this.popover.positionVisible = false
      } else {
        warningMessage(`${node.label} 已存在！`)
      }
    }

  }

  /**
   * 处理地区标签删除
   *
   * @param {number} index 索引
   * @return {void}
   */
  private handleAreaTagClose(index: number): void {
    this.model.work_area.splice(index, 1)
  }

  /**
   * 处理地区添加
   *
   * @param {Array} value 选定值
   * @return {void}
   */
  private handleChangeAreaPlus(value: Array<number>): void {
    const nodes = (this.$refs['area-plus'] as any).getCheckedNodes()
    if (nodes.length === 1) {
      const node = nodes[0]
      if (!this.model.work_area.find((item: any) => item.value === node.value)) {
        this.model.work_area.push({
          'value': node.value,
          'label': node.label,
          'merge_label': node.pathLabels.join('-')
        })
        this.popover.areaVisible = false
      } else {
        warningMessage(`${node.label} 已存在！`)
      }
    }
  }

  /**
   * 保存
   *
   * @return {void}
   */
  private save(): void {
    this.saveLoading = true
    this.updateJobIntention({ id: this.resume.id, index: this.dialog.index, params: this.model }).then((res: any) => {
      this.saveLoading = false
      if (res.status !== 200) {
        errorMessage(res.message)
        return false
      }

      successMessage(res.message)
      this.close()
    }).catch((err: any) => {
      this.saveLoading = false
    })
  }

  @Emit()
  close(): void {
  }
}
</script>

<style lang="scss" scoped>

</style>
